<template>
  <div class="main">
    <section
      v-if="orderShopItems && Array.isArray(orderShopItems) && orderShopItems.length > 0"
      class="section-content cart"
    >
      <h3>全部商品 {{ totalQuantity }}</h3>
      <div class="product-table-header">
        <a-checkbox
          :checked="checkedAll"
          :indeterminate="checkedAllIndeterminate"
          @change="handleCheckedAllChange($event)"
        >
          全选
        </a-checkbox>
        <p>商品</p>
        <p class="text-center-p">单价</p>
        <p class="text-center-p">数量</p>
        <p class="text-center-p">小计</p>
        <p class="text-center-p">操作</p>
      </div>

      <div class="shop-container">
        <div v-for="orderShopItem in orderShopItems" :key="orderShopItem.id">
          <div class="shop-header">
            <a-checkbox
              :indeterminate="orderShopItem.checkedAllIndeterminate"
              :checked="orderShopItem.checked"
              @change="handleShopItemCheckedChange($event, orderShopItem)"
            >
            </a-checkbox>
            <p>{{ orderShopItem.shopName }}</p>
          </div>

          <div
            class="orderProductItem cell"
            v-for="orderProductItem in orderShopItem.orderProductItems"
            :key="orderProductItem.cartId"
          >
            <div class="product-checkbox-cover">
              <a-checkbox
                :checked="orderProductItem.checked"
                @change="handleOrderProductItemCheckedChange($event, orderProductItem, orderShopItem)"
              >
              </a-checkbox>
              <a-image class="product-cover" :src="orderProductItem.cover" />
            </div>
            <p v-if="orderProductItem.goodsName">{{ orderProductItem.goodsName }}</p>
            <p v-if="orderProductItem.archiveName">{{ orderProductItem.archiveName }}</p>
            <p class="text-center-p unit-price">￥{{ orderProductItem.retailPrice }}</p>

            <input-number v-model="orderProductItem.quantity" />

            <p class="text-center-p subtotal-price">￥{{ orderProductItem.subtotalAmount }}</p>
            <p class="text-center-p" @click="deleteItemClick(orderShopItem, orderProductItem)">删除</p>
          </div>
        </div>
      </div>

      <div class="footer">
        <a-checkbox :checked="checkedAll" :indeterminate="checkedAllIndeterminate" @change="handleCheckedAllChange">
          全选
        </a-checkbox>
        <a-button class="over-a-button" :disabled="checkOutStatus" @click="deleteCheckedOrderProductItemClick"
          >删除</a-button
        >
        <a-button class="over-a-button" @click="deleteAllItemClick">清空购物车</a-button>
        <div class="check-out">
          <a-button class="cart-btn" :disabled="checkOutStatus" @click="checkOutClick" type="primary">去结算</a-button>
          <p class="text-center-p">
            总价<span class="cart-total-price">￥{{ checkedOrderProductItemsTotalAmount }}</span>
          </p>
          <p class="text-right-p">
            已选择<span class="cart-total-selected-product">{{ checkedOrderProductItemsTotalQuantity }}</span
            >件商品
          </p>
        </div>
      </div>
    </section>
    <section v-else class="section-content">
      <div class="no-data-container">
        <a-image class="no-data-cart" :src="require('@/assets/no-data-cart.png')" alt="" />
        <p>购物车空空的哦~，去看看心仪的商品吧~</p>
        <div class="more-footer">
          <div class="container" onclick='window.location.href="/goods/list"'>
            <h5>去购物</h5>
            <a-icon class="more-footer-icon" type="right" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {}
  },
  components: {},

  computed: {
    ...mapState('cart', {
      orderShopItems: (state) => state.orderShopItems,
      checkedAll: (state) => state.checkedAll,
      checkedAllIndeterminate: (state) => state.checkedAllIndeterminate,
      checkOutStatus: (state) => state.checkOutStatus,
      cartUpdateInfo: (state) => state.cartUpdateInfo,
    }),

    ...mapGetters('cart', [
      'checkOutStatus',
      'totalQuantity',
      'checkedOrderProductItemsTotalAmount',
      'checkedOrderProductItemsTotalQuantity',
      'checkedCartIds',
      'checkedOrderProductItems',
    ]),
  },


  created() {
    this.getCartInfoAction()
      .then()
      .catch((error) => {
        this.$message.error(error.message)
      })
  },

  methods: {
    ...mapMutations('cart', ['deleteOrderProductItem', 'deleteCheckedOrderProductItem', 'deleteAllItem']),

    ...mapActions('cart', [
      'updateAllItemsCheckedAction',
      'updateShopItemCheckedAction',
      'updateOrderProductItemCheckedAction',
      'updateOrderProductItemQuantityAction',
      'updateOrderProductItemWhenQuantityMinusAction',
      'updateOrderProductItemWhenQuantityPlusAction',
      'getCartInfoAction',
      'deleteItemAction',
      'deleteItemsAction',
      'deleteAllItemAction',
      'purchaseImmediatelyAction',
      'updateItemsAction',
    ]),

    handleCheckedAllChange(event) {
      const checked = event.target.checked
      this.updateAllItemsCheckedAction({ checked })
    },

    handleShopItemCheckedChange(event, orderShopItem) {
      const checked = event.target.checked
      this.updateShopItemCheckedAction({ checked, orderShopItem })
    },

    handleOrderProductItemCheckedChange(event, orderProductItem, orderShopItem) {
      const checked = event.target.checked
      this.updateOrderProductItemCheckedAction({ checked, orderProductItem, orderShopItem })
    },

    // handleInputNumberChange(event, orderProductItem) {
    //   const quantity = event.target.value
    //   this.updateOrderProductItemQuantityAction({ orderProductItem, quantity })
    // },

    // minusClick(event, orderProductItem, orderShopItem) {
    //   this.updateOrderProductItemWhenQuantityMinusAction({ orderProductItem })
    // },

    // plusClick(event, orderProductItem, orderShopItem) {
    //   console.log('\n\n  = ' + 'lusClick' + '\n\n');
    //   this.updateOrderProductItemWhenQuantityPlusAction({ orderProductItem })
    // },

    checkOutClick() {
      if (this.checkedCartIds && this.checkedCartIds.length > 0) {
        const parameters = {
          //订单信息类型: 0-商品立即购买订单确认信息 1-资料立即购买订单确认信息 2-购物结算订单确认信息 3-购物车信息 4-下单后订单信息
          orderInfoType: 2,
          orderType: 0,
        }

        this.$router.push({
          path: '/order/confirm',
          query: { confirmOrderQuery: JSON.stringify(parameters) },
        })
      } else {
        this.$message.error('请选择商品')
      }
    },

    deleteItemClick(orderShopItem, orderProductItem) {
      var that = this
      this.$confirm({
        title: '温馨提示',
        content: '确认要删除该商品吗?',
        onOk() {
          const parameters = '?id=' + orderProductItem.cartId
          that
            .deleteItemAction(parameters)
            .then(() => {
              that.deleteOrderProductItem({ orderShopItem, orderProductItem })
              that.reloadWindowIfNeed()
              that.$message.success('删除成功')
            })
            .catch((error) => {
              that.$message.error(error.message)
            })
        },
        onCancel() {},
      })
    },

    deleteCheckedOrderProductItemClick() {
      const that = this
      this.$confirm({
        title: '温馨提示',
        content: '确认要删除选中商品吗?删除后无法恢复哦！',
        onOk() {
          var cartIds = that.checkedCartIds.reduce((seriesCartId, cartId) => {
            return seriesCartId + cartId + ','
          }, '')

          const parameters = '?ids=' + cartIds

          that
            .deleteItemsAction(parameters)
            .then(() => {
              that.$message.success('删除成功')
              that.deleteCheckedOrderProductItem()
              that.reloadWindowIfNeed()
            })
            .catch((error) => {
              that.$message.error(error.message)
            })
        },
        onCancel() {},
      })
    },

    deleteAllItemClick() {
      const that = this
      this.$confirm({
        title: '温馨提示',
        content: '确认要清空购物车吗?',
        onOk() {
          that.deleteAllItemAction().then(() => {
            // that.deleteAllItemAction()
            that.reloadWindowIfNeed()
            that.$message.success('删除成功')
          })
        },
        onCancel() {},
      })
    },

    reloadWindowIfNeed() {
      if (this.orderShopItems && this.orderShopItems.length === 0) {
        window.location.reload()
      }
    },
  },
}
</script>

<style scoped lang="less">
h3 {
  padding: 10px 0;
  color: var(--r-primary-color);
}

.cart {
  margin: 40px auto;
  padding: 20px 15px;
  background: white;
}
.product-table-header {
  padding: 0 10px;
  display: grid;
  flex-direction: row;
  height: 44px;
  background: var(--r-background-gray);
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 130px auto 80px 200px 80px 80px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* text-align: center; */
}
.footer {
  margin-top: -1px;
  padding-left: 10px;
  display: grid;
  flex-direction: row;
  height: 44px;
  background: white;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 64px 44px 80px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* text-align: center; */
}

.check-out {
  display: flex;
  width: 100%;
  /* flex-flow: row-reverse; */
  align-items: center;
  flex-direction: row-reverse;
}

.check-out p {
  margin: 0 5px;
  padding: 0 5px;
}

.cart-btn {
  width: 80px;
}

.cart-total-price {
  color: var(--r-primary-color);
  font-weight: bold;
  font-size: 16px;
}

.cart-total-selected-product {
  color: var(--r-primary-color);
  font-weight: bold;
  font-size: 16px;
}
.unit-price {
  color: rgba(0, 0, 0, var(--r-opacity-secondary));
  font-weight: bold;
  font-size: 14px;
}
.subtotal-price {
  color: var(--r-primary-color);
  font-weight: bold;
  font-size: 14px;
}
.empty-cart-btn {
  margin: 0 0;
  padding: 0 0;
  border: none;
}
.delete-checked-item-btn {
  margin: 0 0;
  padding: 0 0;
  border: none;
}

.empty-cart-btn :focus,
.empty-cart-btn :hover {
  color: #246bfb;
  border: none;
  background-color: white;
}
.delete-checked-item-btn :focus,
.delete-checked-item-btn :hover {
  color: #246bfb;
  border: none;
  background-color: white;
}

.shop-container .orderProductItem {
  display: grid;
  flex-direction: row;
  align-items: top;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 140px auto 80px 200px 80px 80px;
}
.cell {
  margin-top: -1px;
  padding: 10px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.orderProductItem .a-image {
  margin: 0 10px;
  width: 100px;
  height: 100px;
  background: var(--r-background-gray);
  border-radius: 5px;
  overflow: hidden;
}

.product-cover {
  width: 100px;
  height: 100px;
}

.product-checkbox-cover {
  display: flex;
  flex-direction: row;
}
.orderProductItem .a-input-number {
  width: 120px;
}

.shop-header {
  padding: 0 10px;
  display: grid;
  flex-direction: row;
  height: 44px;
  /* background: var(--r-background-gray); */
  background: white;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-secondary));
  font-weight: 500;
  grid-template-columns: 24px auto;
}

.product-count-input-container {
  margin-top: -4px;
  display: flex;
  justify-content: center;
}

.product-count-input-container .a-input-number {
  width: 126px;
}
.text-center-p {
  text-align: center;
}
.text-right-p {
  text-align: right;
}

.a-button--primary {
  margin: 0 0;
  padding: 0 0;
  height: 44px;
  border-radius: 0;
}

.no-data-container {
  margin: 20px 10px;
  padding: 20px 20px;
  background: white;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-data-cart {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}
</style>
